<template>
	<view>

		<view class="buttons">
			<button @click="filterRecommend(ctg.id)" v-for="ctg in newCtgs" :key="ctg.id"
				:type="ative_ctg_id===ctg.id?'primary':''" size="mini">{{ctg.name}}-{{ctg.id}}</button>
		</view>


		<uni-card v-for=" rec in recommend" :key="rec.id" title="基础卡片">
			<text>{{rec.title}}</text>
		</uni-card>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref
	} from 'vue';

	import {
		getPostsByIdApi,
		getCtgsApi
	} from '../../api/index.js'

	const post_id = ref('')
	const post = ref({});

	const ctgs = ref([]);
	const ative_ctg_id = ref('');

	const newCtgs = computed(() => ctgs.value.filter(el => el.id !== post.value.ctg));

	const recommend = computed(() => {
		if (post.value.expand?.recommend) {
			return post.value.expand.recommend.filter(el => el.ctg === ative_ctg_id.value)
		} else {
			return []
		}
	});

	onLoad(async (e) => {
		post_id.value = e.post_id;
		uni.setNavigationBarTitle({
			title: e.title
		});
		await getPostsById();
		await getCtgs();
	});


	function filterRecommend(ctg_id) {

		ative_ctg_id.value = ctg_id;

	}

	async function getCtgs() {
		const res = await getCtgsApi();
		ctgs.value = res.data.items;
		ative_ctg_id.value = newCtgs.value[0].id
	}

	async function getPostsById() {
		const res = await getPostsByIdApi(post_id.value, );
		post.value = res.data;

	}
</script>

<style lang="scss">
</style>